<template>
    <div class="copyright" v-if="skeleton">
        <div class="copyright_head">
            <h3 v-for="(item,index) in site_info" :style="{'display': index===0 ?  '':'none' }">
                {{item}}
            </h3>
            <img src="/img/common/copyright.png" alt="">
        </div>
        <p v-for="(item,index) in site_info"  :style="{'display': index===0 ?  'none':'' }">   {{item}}</p>
        <p>总访问次数：{{ webLength }} 次</p>
    </div>
    <div v-else class="circle_box">
        <CircleLoading></CircleLoading>
    </div>
</template>

<script>
import api from "@/api";
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";

export default {
    name: "SiteInformation",
    components: {CircleLoading},
    props:['site_info'],
    data(){
        return{
            webLength:"",
            skeleton:false,
        }
    },
    watch:{
        site_info(newValue,oldValue){
            if(newValue != ""){
                 setTimeout(()=>{
                     this.skeleton = true;
                 },100)
            }
        }
    },
    mounted() {
        api.webLength().then((res)=>{
            this.webLength = res.data.data;
        })
    },
}
</script>

<style scoped>

.circle_box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    border-radius:5px;
    margin-top:10px
}
   .copyright{
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       border-radius: 5px;
       padding: 10px 10px;
       color: #8f8c8c ;
       box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
       background: linear-gradient(to right, rgba(245, 241, 243, 0.6) 0%, rgba(255, 252, 220, 0.68) 100%);
   }
   p{
       padding: 5px 0;
       font-size: 0.9rem;
   }
.copyright_head{
    display: flex;
    justify-content: space-between;
}

</style>